import { useState } from 'react';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { UserOutlined,LockOutlined  } from '@ant-design/icons';
import { Input, Button,message } from 'antd';
import '../css/Login.scss'
const Login = ()=>{
  const [messageApi,contextHolder] = message.useMessage()
  const navigate = useNavigate()
 const [user,setuser] = useState({
  username:'admin',
  pass:'123456'
 })
  // 用户名
  const ChangeuserName = (e)=>{
    setuser({...user,username:e.target.value})
  }

   // 密码
   const ChangePass = (e)=>{
    setuser({...user,pass:e.target.value})
  }

  // 登录
  const ClickLogin = ()=>{
    if(user.username!=='admin' || user.pass!=='123456'){
      messageApi.open({
        type: 'error',
        content: '账号或密码错误',
      });
    }else{
      messageApi.open({
        type: 'success',
        content: '登录成功！',
      });
      setTimeout(()=>{
        navigate('/home/index')
      },500)
      sessionStorage.setItem("userinfo",JSON.stringify(user));
    }
  }
    return (
      <div className='login'>
         {contextHolder}
        <div className='loginInput'>
          <h2 style={{marginBottom:20}}>登录</h2>
          <div className='inputUsername'>
            <Input value={user.username} onChange={ChangeuserName} size="large" placeholder="请输入用户名" prefix={<UserOutlined />} />
          </div>
          <div className='inputPass'>
            <Input.Password value={user.pass} onChange={ChangePass} placeholder="请输入密码" prefix={<LockOutlined />}/>
          </div>
          <div className='button'>
              <Button className='buttons' type="primary" onClick={ClickLogin}>登录</Button>
          </div>
        </div>
      </div>
    );
}

export default Login;